<!--
*@Author: QWP
*@Description: 值班情况
*@Date: 2024-07-25 19:07:03
-->
<template>
  <u-card :title="title" class="u-work-case-card">
    <a-list
      :grid="{ gutter: 26, column: 2 }"
      :data-source="zbData"
      v-if="zbData.length"
    >
      <!-- v-if="isCardShow" -->
      <template #renderItem="{ item, index }">
        <a-list-item
          style="padding-left: 0; padding-right: 0"
          v-if="index <= 1"
        >
          <a-space direction="vertical">
            <a-space>
              <u-icon-font
                :type="item.icon"
                style="font-size: var(--font-size-level-2); color: #1890ff"
              ></u-icon-font>
              <span class="u-zb-title">{{ item.title }}</span>
            </a-space>
            <a-space direction="vertical">
              <span class="u-name-span">
                姓名:
                <span class="u-name-value-span">{{ item.name }}</span>
              </span>
              <span class="u-name-span">
                电话:
                <span class="u-name-value-span">{{ item.tel }}</span>
              </span>
            </a-space>
          </a-space>
        </a-list-item>
      </template>
    </a-list>
    <a-list :grid="{ gutter: 26, column: 2 }" :data-source="sumData">
      <template #renderItem="{ item }">
        <!-- @click="currentTitle = item.title; showDetial = true" -->
        <a-list-item
          style="padding-left: 0; padding-right: 0"
          @click="goClick(item.clickType)"
        >
          <a-space>
            <a-image :src="item.img" :preview="false"></a-image>
            <a-space direction="vertical">
              <span class="u-sum-title">{{ item.title }}</span>
              <span class="u-sum-value" :style="{ color: item.valueColor }">
                {{ item.value }}
                <span class="u-sum-title" :style="{ color: item.valueColor }">
                  {{ item.desc }}
                </span>
              </span>
            </a-space>
          </a-space>
        </a-list-item>
      </template>
    </a-list>
  </u-card>

  <!-- 值班详细情况 -->
  <u-dialog
    :title="title"
    wrap-class-name="full-modal"
    v-model:open="showDetial"
    :hideBtns="['submit']"
  >
    <Detial :currentTitle="currentTitle" />
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { urlFile, numberC } from '@/util/common';
import Detial from './Detial.vue';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash';
import * as beDutyApi from '@/service/administration/beDuty/index';
import * as depUserApi from '@/service/personnel/work/index';
import { storeToRefs } from 'pinia';
import { useBaseStore } from '@/store';

const router = useRouter();
const { DUTY_TYPE } = storeToRefs(useBaseStore());

let title = ref<string>('部门在岗情况');
let zbData = ref<any>([]);

// 如果是节假日就是 多个 备勤
let sumData = ref<any[]>([
  {
    title: '在岗',
    img: urlFile('work/detial/1.png'),
    value: 0,
    key: 'onUserNumber',
    type: ['work'],
    valueColor: '#13C2C2',
    bgColor: '#fff',
    marginRight: '16px',
    clickType: 2,
  },
  {
    title: '值班',
    img: urlFile('work/detial/2.png'),
    value: 0,
    key: 'dutyNumber',
    valueColor: '#1890FF',
    bgColor: '#ECF6FF',
    clickType: 3,
  },
  {
    title: '备勤',
    img: urlFile('work/detial/3.png'),
    value: 0,
    key: 'standNumber',
    type: ['vocation'],
    valueColor: '#FA8C16',
    bgColor: '#fff',
    marginRight: '16px',
    clickType: 4,
  },
  {
    title: '出差',
    img: urlFile('work/detial/4.png'),
    value: 0,
    key: 'evectionNumber',
    type: ['work'],
    valueColor: '#52C41A',
    bgColor: '#fff',
    marginRight: '16px',
    clickType: 5,
  },
  {
    title: '休假',
    img: urlFile('work/detial/5.png'),
    value: 0,
    key: 'leaveNumber',
    type: ['work'],
    valueColor: '#9254DE',
    bgColor: '#fff',
    marginRight: '16px',
    clickType: 6,
  },
  {
    title: '离驻地',
    img: urlFile('work/detial/6.png'),
    value: 0,
    key: 'leavecdNumber',
    valueColor: '#EF4757',
    bgColor: '#fff',
    marginRight: '16px',
    clickType: 7,
  },
]);

let currentTitle = ref<string>('');
const showDetial = ref<boolean>(false);

// 跳转
const goClick = (clickType?: number) => {
  localStorage.setItem('clickType', clickType.toString());
  router.push({
    path: 'DeptCheckIn',
    query: { _tab: '1', label: '部门考勤' },
  });
};
// 值班人数数据
let depUserOptions = ref<any>({});

// 判断当前是否是节假日
let isCardShow = ref(false);
const isNoWorkDay = async () => {
  try {
    const nowDay = dayjs().format('YYYY-MM-DD');
    const result = await beDutyApi.selectNoWorkDay();
    if (result.code == 0) {
      let arrList = [];
  
      result.data.map(e => {
        arrList.push(dayjs(e.DAY).format('YYYY-MM-DD'));
      });
      if (arrList.indexOf(nowDay) == -1) {
        isCardShow.value = false;
        title.value = '部门在岗情况';
      } else {
        isCardShow.value = true;
        title.value = '值班备勤情况';
      }
    }
  } catch (error) {}
};

//获取数据
const getSearch = async () => {
  const res = await depUserApi.deptUser({
    datetime: dayjs(dayjs().valueOf()).format('YYYY-MM-DD'),
  });
  if (res.code == 0 && res.data) {
    for (let key in res.data) {
      depUserOptions.value[key] = res.data[key];
    }
    sumData.value.forEach(item => {
      item.value = numberC(depUserOptions.value[item.key]);
    });
    let filterType = isCardShow.value == false ? 'vocation' : 'work';
    sumData.value = sumData.value.filter(
      i => !(i['type'] || []).includes(filterType)
    );
  }
};

// 获取值班人员信息
const getWorkUsers = async () => {
  const searchF = reactive({
    model: {
      backuptype: 2,
      pageStatus: 2,
      dateTime: dayjs().format('YYYY-MM-DD'),
    },
    current: 1,
    size: 2000,
  });
  const result = await beDutyApi.page(searchF);
  if (result.code == 0) {
    zbData.value = result.data.records;
  }
  DUTY_TYPE.value.map(e => {
    let leaderIndex = cloneDeep(zbData.value).findIndex(i => i.isleader == 1);
    if (leaderIndex != -1) {
      let leaderItem = cloneDeep(zbData.value)[leaderIndex];
      zbData.value.splice(leaderIndex, 1);
      zbData.value.unshift(leaderItem);
    }
    zbData.value.map(index => {
      if (index.duties == e.code || index.duties == e.id) {
        index['dutiesName'] = e.name;
      }
      if (index.isleader == 1) {
        index['title'] = '值班领导';
        index['icon'] = 'icon-a-zu230';
      } else {
        index['title'] = '值班科员';
        index['icon'] = 'icon-zhibankeyuan';
      }
      index['iconColor'] = '#1890FF';
      index['name'] = index['fkusername'];
    });
  });
};

onMounted(async () => {
  await isNoWorkDay();
  getSearch();
  getWorkUsers();
});
</script>

<style lang="scss" scoped>
.u-zb-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-2);
  color: #1890ff;
}

.u-name-span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #666666;
}

.u-name-value-span {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #333333;
}

.u-tel-value-span {
  font-family: DIN, DIN;
  font-weight: 500;
  font-size: var(--font-size-level-1);
  color: #333333;
}

.u-sum-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: var(--font-size-level-1);
  color: #333333;
}

.u-sum-value {
  font-family: DIN Medium, DIN Medium;
  font-weight: 500;
  font-size: 28px;
}
</style>

<style lang="scss">
.u-work-case-card {
  background-image: url('./../../../../../assets/index/zb_bg.png');
  background-repeat: no-repeat;
  background-position: right bottom;

  .ant-card-body {
    padding-left: 20px !important;
  }
}
</style>
